<template>
	<view class="forget">
		
		<view class="content" v-if="showBinding">
			<!-- 主体 -->
			<view class="main">
				<wInput
					v-model="phone_number"
					type="text"
					maxlength="11"
					placeholder="请输入手机号码"
				></wInput>
				<wInput
					v-model="password"
					type="password"
					placeholder="请输入密码"
					isShowPass
				></wInput>
				<wInput
					v-model="password_repetition"
					type="password"
					placeholder="请再次输入密码"
					isShowPass
				></wInput>
			</view>
			
			<wButton 
				class="wbutton"
				text="确定"
				:rotate="isRotate" 
				@click.native="upPwd()"
			></wButton>
		</view>
		<view class="box" v-else>
			<text class="mobile-tip">您已完成绑定：{{userInfo.mobile}}</text>
			<uni-tag text="重新绑定" type="error" :inverted="true" :circle='false' @click="showBindingForm"></uni-tag>
			<view class="tip-box">
				<text>您可用绑定的手机号码，在H5/APP端进行登录</text>
				<view class="btn-box">
					<uni-tag class="btn-item" v-if="globalConfig.h5" text="复制H5网址" size="small" type="success" :inverted="false" :circle='true' @click="copyH5"></uni-tag>
					<uni-tag class="btn-item" v-if="globalConfig.app" text="复制APP下载网址" size="small" type="success" :inverted="false" :circle='true' @click="copyH5"></uni-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import base from '@/common/base.js';
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	export default {
		mixins: [base],
		data() {
			return {
				phone_number: "", //电话
				password: "", //密码
				password_repetition: "", //确认密码
				verification_code:"", //验证码
				isRotate: false, //是否加载旋转
				showBinding: true
			}
		},
		components:{
			wInput,
			wButton
		},
		onShow() {
			if (this.userInfo.mobile) {
				this.showBinding = false;
			}
		},
		mounted() {
			_this= this;
		},
		methods: {
			copyH5(){
				uni.setClipboardData({
					data: this.globalConfig.h5,
					success:(res)=>{
						this.$config.toast('已复制');
					},
					fail:()=>{
						this.$config.toast('复制失败');
					}
				})
			},
			showBindingForm() {
				this.showBinding = true;
			},
			getVerCode() {
				var phone_reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!phone_reg.test(this.phone_number)) {
					uni.showToast({
						"title": "手机号错误，请重新填写",
						"icon": "none"
					});
					return;
				}
				this.$refs.runCode.$emit('runCode');
				uni.showLoading({
					title: "发送中..."
				})
				this.$http.post('api/passport/sms-code', {
					mobile: this.phone_number,
					usage: 'up-pwd',
				}).then((res) => {
					uni.hideLoading();
					this.$config.toast('验证码发送成功');
				}).catch((error) => {
					uni.hideLoading();
					this.$refs.runCode.$emit('runCode',0);
					this.$config.toast(error.message);
				});
			},
			upPwd() {
				if(this.isRotate){
					return false;
				}
				var phone_reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!phone_reg.test(this.phone_number)) {
					this.$config.toast("手机号不正确，请重新输入");
					return;
				}
				if (this.password.length == 0) {
					this.$config.toast("请输入密码");
					return;
				}
				if (this.password_repetition.length == 0) {
					this.$config.toast("请输入确认密码");
					return;
				}
				if (this.password != this.password_repetition) {
					this.$config.toast("两次输入密码不一致");
					return;
				}
				let data = {
					mobile: this.phone_number,
					password: this.password,
					password_repetition: this.password_repetition
				};
				_this.isRotate=true;
				
				this.$http.post('api/user/binding', data).then((res) => {
					_this.isRotate=false;
					this.showBinding = false;
					this.updateUserInfo(res.member);
					this.$config.toast("绑定成功");
				}).catch((error) => {
					_this.isRotate=false
					this.$config.toast(error.message);
				});
			},
		}
	}
</script>

<style>
	@import url("@/components/watch-login/css/icon.css");
	@import url("@/static/style/login.css");
	page {
		background: #FFFFFF !important;
	}
	
	.box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}
	
	.mobile-tip {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.tip-box {
		margin: 20rpx 40rpx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		width: 90%;
		padding: 30rpx;
		color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		line-height: 60rpx;
	}
	
	.btn-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.btn-item {
		margin-right: 20rpx;
	}
	
	.btn-item:last-child {
		margin-right: 0;
	}
</style>

